<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <title></title>
    <!--[if lte IE 8]>
    <script>
        document.createElement('g-data-source');
        document.createElement('g-data-grid');
        document.createElement('g-checkbox-column');
        document.createElement('g-column');
        document.createElement('g-column-tmpl');
        document.createElement('g-action-remove');
        document.createElement('g-footer');
        document.createElement('g-footer-cell');
        document.createElement('ng-repeat');
        document.createElement('ng-click');
        document.createElement('ng-dblclick');
        document.createElement('g-checkbox');
        document.createElement('g-cell');
        document.createAttribute('g-cell');
        document.createAttribute('ng-repeat');
    </script>
    <![endif]-->
    <link href="../../../static/css/iconfont.css" rel="stylesheet" type="text/css">
    <link href="../../../static/css/controls.css" rel="stylesheet" type="text/css">

    <script>var ctx = '';
    var basePath = '/gillion-web';</script>
    <script src="../../../bower_components/requirejs/require.js" data-main="../../../static/app.js" data-bootstrap-modules="'demo/dataGrid/DataGridBasicTest'"></script>

    <style>
        [ng-cloak] {
            display: none;
        }
    </style>
</head>
<body ng-controller="dataGridTestController">

<g-data-source url="/html/demo/dataGrid/demo.json" data-source-name="employeeSource" page="true" data-current-page="{{employeeGridPage}}" allow-auto-load="true"></g-data-source>
<!--
   + gDataGrid
        sourceName: 绑定的数据源的名称
-->
<div>
<g-data-grid data-source-name="employeeSource"
             data-on-load-success="empGridRendered(grid,source)"
             data-checked-rows="empCheckedRows"
             data-validator-name="Employee_Update">
    <g-checkbox-column></g-checkbox-column>
    <g-column width="100px">
        <i class="btn-set-icon iconfont icon-set"></i>&nbsp;操作
        <g-column-tmpl>
            <g-action-remove on-before-action="onRemoveRecord($event, record)"></g-action-remove>
        </g-column-tmpl>
    </g-column>
    <g-column width="20%" data="name" sortable editable="text">姓名
    </g-column>
    <g-column width="5%" data="sex | sexToCn" sortable>性别</g-column>
    <g-column width="30%" data="age" sortable>年龄</g-column>
    <g-column width="30%" data="email">Email</g-column>
    <g-column width="20%" data="telephone">固定电话</g-column>
    <g-column width="10%" data="mobile">移动电话</g-column>
    <g-footer>
        <g-footer-cell style="text-align: left">合计:</g-footer-cell>
        <g-footer-cell>共 {{moreAttrs.totalCount}} 条</g-footer-cell>
        <g-footer-cell colspan="2"></g-footer-cell>
        <g-footer-cell>平均年龄：{{moreAttrs.ageAvg}}</g-footer-cell>
        <g-footer-cell colspan="3"></g-footer-cell>
    </g-footer>
</g-data-grid>
<g-pagination-navi source-name="employeeSource"></g-pagination-navi>
<g-pagination-size source-name="employeeSource"></g-pagination-size>
</div>

{{empGridCheckedRows | json}}

<input type="text" ng-model="dataSources.employeeSource.currentPage"/>
<input type="number" ng-model="selectedRowBindTest"/>
<input type="number" ng-model="checkedRowBindTest"/>

<br/>
<br/>
<br/>
<br/>

</body>
</html>